import React,{useEffect} from 'react';
import {Navigate,Route,Routes,useNavigate} from 'react-router-dom';
import {Layout} from 'antd';

import './index.less';
import memoryUtils from '../../utils/memoryUtils';
import LeftNav from '../../components/LeftNav';
import RightHeader from '../../components/RightHeader';
import Home from '../Home';
import User from '../User';
import Role from '../Role';
import Category from '../Category';
import Product from '../Product';
import Line from '../Charts/line';
import Pie from '../Charts/pie';
import Bar from '../Charts/bar';
import ProductDetail from '../Product/detail';
import ProductUpdate from '../Product/update';
import ProductAdd from '../Product/add';

const {Header,Footer,Sider,Content} = Layout;

/**
 * 一级组件 主页
 */
function Admin(){
  // navigate跳转路由
  const navigate = useNavigate();
  // 从内存中获取用户信息
  const user = memoryUtils.user;

  /**
   * 页面刷新时调用
   * 判断是否登录，如果未登录则跳转到登录页面
   */
  useEffect(function(){
    if(!user || !user._id){
      navigate('/login',{replace: true});
    }
  });

  return (
    <Layout className="layout">
      <Sider className="left"><LeftNav/></Sider>
      <Layout className="right">
        <Header className="right-header"><RightHeader/></Header>
        <Content className="right-content">
          <Routes>
            {/*配置默认跳转到首页*/}
            {/*<Route path='/' element={<Navigate to='/home' />}></Route>*/}
            <Route path='/*' element={<Navigate to='/home' />}></Route>
            {/*<Route path='/' element={<Home/>}></Route>*/}
            {/*二级路由 首页*/}
            <Route path='home' element={<Home/>}></Route>
            {/*二级路由 品类管理*/}
            <Route path='category' element={<Category/>}></Route>
            {/*二级路由 商品管理/主页*/}
            {/*<Route path='product' element={<Product/>}></Route>*/}
            <Route path='product' element={<Product/>}></Route>
            {/*三级路由 商品管理/详情页*/}
            <Route path='product/detail' element={<ProductDetail/>}></Route>
            {/*三级路由 商品管理/新增页*/}
            <Route path='product/add' element={<ProductAdd/>}></Route>
            {/*三级路由 商品管理/修改页*/}
            <Route path='product/update' element={<ProductUpdate/>}></Route>
            {/*二级路由 用户管理*/}
            <Route path='user' element={<User/>}></Route>
            {/*二级路由 角色管理*/}
            <Route path='role' element={<Role/>}></Route>
            {/*二级路由 柱状图*/}
            <Route path='charts/line' element={<Line/>}></Route>
            {/*二级路由 折线图*/}
            <Route path='charts/pie' element={<Pie/>}></Route>
            {/*二级路由 饼图*/}
            <Route path='charts/bar' element={<Bar/>}></Route>
          </Routes>
        </Content>
        <Footer className="right-footer">推荐使用谷歌浏览器，可以获得更佳页面操作体验</Footer>
      </Layout>
    </Layout>
  );
}

export default Admin;